@mixin color($color) {
	background-color: $color;

	&.cl-tag--plain {
		color: $color;
		border-collapse: $color;
		background-color: #fff;
	}
}

.cl-tag {
	border-radius: 6rpx;
	padding: 0 20rpx;
	height: 56rpx;
	line-height: 56rpx;
	font-size: 26rpx;
	color: #fff;
	display: inline-block;

	&--small {
		height: 56rpx;
		line-height: 56rpx;
	}

	&--mini {
		height: 48rpx;
		line-height: 48rpx;
		font-size: 24rpx;
	}

	&--round {
		border-radius: 48rpx;
	}

	&--plain {
		border-width: 1rpx;
		border-style: solid;
	}

	&--primary {
		@include color($color-primary);
	}

	&--success {
		@include color($color-success);
	}

	&--warning {
		@include color($color-warning);
	}

	&--error {
		@include color($color-error);
	}

	&--info {
		@include color($color-info);
	}

	.cl-tag__close {
		margin-left: 10rpx;
	}
}
